<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 新六项措施自评 -->
    <div id="base-breadcrumb" style="position: relative; overflow: hidden">
      <!-- 搜索 -->
      <searchData :searchData="searchArr" @search="search"></searchData>
      <!-- 表格 -->
      <a-card :bordered="false">
        <!-- <title-name :title="$route.meta.title"></title-name> -->
        <!-- <a-button :loading="loading" @click="handleExport2">下载</a-button> -->
        <a-row type="flex" style="flex-wrap: nowrap">
          <a-button v-if="$currentPost().code === aTabsList[scoringParty].code" v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_020_add_01'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_020_add_01'
                      }
              ]" icon="plus" type="primary" @click="handleManage(2)">评分</a-button>
          <div>
            <a-date-picker
                    v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_020_expbu_04'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_020_expbu_04'
                      }
              ]"
                    mode="year" :open="yearOpen" @change="yearOpen = true" @openChange="yearOpen = !yearOpen" @panelChange="handleExport">
              <a-button class="ml12" type="primary" icon="download">导出在建项目六项措施评分统计</a-button>
            </a-date-picker>
            <a-modal title="提示" :width="500" :visible="visible" :footer="null" @cancel="visible = false" :zIndex="9000">
              <div class="mb20">
                <a-icon type="info-circle" style="color: #faad14; margin-right: 6px" />
                确定导出{{ year }}在建项目六项措施评分统计
              </div>
              <div align="right">
                <a-button @click="visible = false">取消</a-button>
                <service-export-mould
                  class="ml12"
                  :serviceiUrl="qualityApiUrl"
                  url="/quality/six-excel/excel"
                  :requestParams="exportType ? {} : { year: year, isBuild: true }"
                  buttonText="确定"
                  @beforeDownload="visible = false"
                ></service-export-mould>
              </div>
            </a-modal>
          </div>
          <service-export-mould
                  v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_020_expco_05'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_020_expco_05'
                      }
              ]"
                  class="ml12" :serviceiUrl="qualityApiUrl" icon="cloud-download" url="/quality/six-excel/excel" buttonText="导出竣工项目六项措施评分统计"></service-export-mould>
        </a-row>
        <div id="tableBox">
          <!-- 表格 -->
          <a-tabs :default-active-key="scoringParty" @change="handleTabChange">
            <a-tab-pane :disabled="aTabsDisabled && scoringParty !== item.id" :key="item.id" :tab="item.name" v-for="item in aTabsList"></a-tab-pane>
          </a-tabs>
          <list-table ref="table" tableLayout="fixed" size="default" rowKey="id" :columns="columns" :request="loadData" :alert="true" show-size-changer show-quick-jumper showPagination="auto">
            <span slot="action" slot-scope="text, record">
              <template>
                <a @click="handleManage(0, record)" v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_020_loo_02'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_020_loo_02'
                      }
              ]">查看</a>
                <a-divider v-if="$currentPost().code === aTabsList[scoringParty].code" v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_020_edi_03'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_020_edi_03'
                      }
              ]" type="vertical"></a-divider>
                <a v-if="$currentPost().code === aTabsList[scoringParty].code" v-btnPermission="[
                      {
                        ident: 'prma_seex',
                        code: 'seex_qm_020_edi_03'
                      },
                      {
                        ident: 'prma_buco',
                        code: 'buco_qm_020_edi_03'
                      }
              ]" @click="handleManage(1, record)">编辑</a>
              </template>
            </span>
          </list-table>
        </div>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { sixMeasuresScore, sixExcel } from '@/api/quality/quality' // api
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目名称
import OrgTreeSelect from '@/components/OrgTreeSelect'
import ServiceExportMould from '@/components/ServiceExportMould'
import { qualityApiUrl } from '@/api/config.js'
import SelectProjectStatus from '@/views/quality/components/SelectProjectStatus' // 项目状态

const searchArr = [
  // 搜索框
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '分公司',
  //   type: SelectSubCompany,
  //   valueKey: 'branchCompanyId'
  // },
  // {
  //   name: '项目名称',
  //   type: SelectProject,
  //   valueKey: 'projectId'
  // },
  {
    name: '项目状态',
    type: SelectProjectStatus,
    valueKey: 'projectStatus'
  },
  {
    name: '考核人',
    value: 'assessmentPeople',
    type: 'input'
  },
  {
    name: '考核时间',
    value: 'assessmentTime',
    type: 'dateRange',
    attr: {
      valueFormat: 'YYYY-MM-DD'
    }
  }
]
const columns = [
  {
    title: '分公司名称',
    dataIndex: 'branchCompanyName'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName'
  },
  {
    title: '考核人',
    dataIndex: 'assessmentPeople'
  },
  {
    title: '考核时间',
    dataIndex: 'assessmentTime'
  },
  {
    title: '平均分',
    dataIndex: 'averageScore'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    ServiceExportMould
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      qualityApiUrl,
      // 查询参数
      queryParam: {},
      // 盒子高度
      // boxHeight: 0,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        // 格式化参数
        this.aTabsDisabled = true
        let assessmentTime = this.queryParam.assessmentTime
        if (assessmentTime && assessmentTime.length > 0) {
          this.queryParam.assessmentTimeStart = assessmentTime[0]
          this.queryParam.assessmentTimeEnd = assessmentTime[1]
          delete this.queryParam.assessmentTime
        }
        this.queryParam.scoringParty = this.scoringParty
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return sixMeasuresScore
          .postList(requestParameters)
          .then((res) => {
            return res
          })
          .finally((err) => {
            this.aTabsDisabled = false
          })
      },
      editModel: 0,
      form: {},
      yearOpen: false, // 年份表单控件
      year: void 0, //年份
      //tabs列表
      aTabsList: [
        { id: 0, name: '项目自评', code: 'PD' },
        { id: 1, name: '分公司', code: 'BC' },
        { id: 2, name: '公司', code: 'CO' }
      ],
      scoringParty: 0,
      // aTabs禁用
      aTabsDisabled: false,
      visible: false, // 确认框loading
      exportType: 0, // 导出类型
      loading: false
    }
  },
  created(){
    this.scoringParty = this.aTabsList.find(i=> i.code === this.$currentPost().code)?.id || 0
  },
  watch: {
    '$route.meta.title': {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          this.$refs.table.refresh()
        })
      }
    }
  },
  methods: {
    /**
     * 打开导出日历
     * val:月份表单值
     */
    handleExport(val) {
      this.year = val.format?.('YYYY')
      this.yearOpen = false
      this.visible = true
    },
    // handleExport2() {
    //   this.loading = true
    //   sixExcel.download({ year: '2021', isBuild: true }).then((res) => {
    //     const blob = new Blob([res.data], { type: 'application/xls' })
    //     const filename = res.headers['content-disposition']
    //     const downloadElement = document.createElement('a')
    //     const href = window.URL.createObjectURL(blob) // 创建下载的链接
    //     downloadElement.href = href
    //     downloadElement.download = filename.substring(filename.indexOf("''") + 2) // 获取文件名
    //     document.body.appendChild(downloadElement)
    //     downloadElement.click() //点击下载
    //     document.body.removeChild(downloadElement) //下载完成移除元素
    //     window.URL.revokeObjectURL(href) //释放blob对象
    //   })
    // },
    /**
     * 切换tab
     * key：切换id
     */
    handleTabChange(key) {
      this.scoringParty = this.aTabsList[key].id
      this.$refs.table.refresh(true)
    },
    // 搜索
    search(value) {
      this.queryParam = value
      this.$refs.table.refresh(true)
    },
    // 操作栏
    handleManage(type, record) {
      this.editModel = type
      let query = {
        editModel: type,
        scoringParty: this.scoringParty
      }
      if (record && record.id) {
        query.id = record.id
      }
      this.$router.push({
        name: 'sixMeasuresScoreEdit',
        query
      })
    }
  }
}
</script>
